<!DOCTYPE HTML>
<html class="reftest-wait">
<head>
<style>
#container {
  height: 500px;
  width: 500px;
  position: relative;
  overflow: hidden;
}
#panel {
  position:absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: translateX(-500px);
  background-color: yellow;
}
#tog {
  position: absolute;
  height: 50px;
  width: 50px;
  left: 0;
  bottom: 0;
  background-color: black;
}
</style>
</head>
<body>
<div id="container">
  <div id="panel">
    <div style="width:300px; height:50px; background:blue;"></div>
  </div>
</div>
<div id="tog"></div>
<script>
console.log(panel.getBoundingClientRect());
panel.style.transform = "translateX(-450px)";
console.log(panel.getBoundingClientRect());
panel.style.transform = "translateX(-400px)";
function doTest() {
  panel.style.transform = "translateX(0)";
  tog.style.visibility = "hidden";
  document.documentElement.removeAttribute("class");
}
window.addEventListener("MozReftestInvalidate", doTest);
</script>
